<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="Hexo Theme Redefine">
    
    <meta name="author" content="西门啸雪">
    <!-- preconnect -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

    
    <!--- Seo Part-->
    
    <link rel="canonical" href="http://aurobreeze.top/2024/10/13/图解http笔记/"/>
    <meta name="robots" content="index,follow">
    <meta name="googlebot" content="index,follow">
    <meta name="revisit-after" content="1 days">
    
        <meta name="description" content="简单的HTTP协议HTTP请求报文1234567GET &#x2F;index.html HTTP&#x2F;1.1Host: www.example.comConnection: keep-aliveUpgrade-Insecure-Requests: 1User-Agent: Mozilla&#x2F;5.0 (Windows NT 10.0; Win64; x64) AppleWebKit&#x2F;537.36 (KHTML,">
<meta property="og:type" content="article">
<meta property="og:title" content="图解HTTP笔记">
<meta property="og:url" content="http://aurobreeze.top/2024/10/13/%E5%9B%BE%E8%A7%A3HTTP%E7%AC%94%E8%AE%B0/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:description" content="简单的HTTP协议HTTP请求报文1234567GET &#x2F;index.html HTTP&#x2F;1.1Host: www.example.comConnection: keep-aliveUpgrade-Insecure-Requests: 1User-Agent: Mozilla&#x2F;5.0 (Windows NT 10.0; Win64; x64) AppleWebKit&#x2F;537.36 (KHTML,">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2024-10-13T02:30:00.000Z">
<meta property="article:modified_time" content="2024-10-13T02:41:40.557Z">
<meta property="article:author" content="John Doe">
<meta property="article:tag" content="HTTP">
<meta name="twitter:card" content="summary">
    
    
    <!--- Icon Part-->
    <link rel="icon" type="image/png" href="/images/redefine-favicon.svg" sizes="192x192">
    <link rel="apple-touch-icon" sizes="180x180" href="/images/redefine-favicon.svg">
    <meta name="theme-color" content="#A31F34">
    <link rel="shortcut icon" href="/images/redefine-favicon.svg">
    <!--- Page Info-->
    
    <title>
        
            图解HTTP笔记 -
        
        AuroBreeze
    </title>

    
<link rel="stylesheet" href="/fonts/Chillax/chillax.css">


    <!--- Inject Part-->
    

    
<link rel="stylesheet" href="/css/style.css">


    
        
<link rel="stylesheet" href="/assets/build/styles.css">

    

    
<link rel="stylesheet" href="/fonts/GeistMono/geist-mono.css">

    
<link rel="stylesheet" href="/fonts/Geist/geist.css">

    <!--- Font Part-->
    
    
    
    

    
        
<script src="/js/libs/anime.min.js"></script>

    

    <script id="hexo-configurations">
    window.config = {"hostname":"aurobreeze.top","root":"/","language":"zh-CN","path":"search.xml"};
    window.theme = {"articles":{"style":{"font_size":"16px","line_height":1.5,"image_border_radius":"14px","image_alignment":"center","image_caption":false,"link_icon":true,"title_alignment":"left","headings_top_spacing":{"h1":"3.2rem","h2":"2.4rem","h3":"1.9rem","h4":"1.6rem","h5":"1.4rem","h6":"1.3rem"}},"word_count":{"enable":true,"count":true,"min2read":true},"author_label":{"enable":true,"auto":false,"list":[]},"code_block":{"copy":true,"style":"simple","font":{"enable":false,"family":null,"url":null}},"toc":{"enable":true,"max_depth":3,"number":false,"expand":true,"init_open":true},"copyright":{"enable":true,"default":"cc_by_nc_sa"},"lazyload":true,"recommendation":{"enable":false,"title":"推荐阅读","limit":3,"mobile_limit":2,"placeholder":"/images/wallhaven-wqery6-light.webp","skip_dirs":[]}},"colors":{"primary":"#A31F34","secondary":null,"default_mode":"light"},"global":{"fonts":{"chinese":{"enable":false,"family":null,"url":null},"english":{"enable":false,"family":null,"url":null}},"content_max_width":"1000px","sidebar_width":"210px","hover":{"shadow":true,"scale":false},"scroll_progress":{"bar":false,"percentage":true},"website_counter":{"url":"https://cn.vercount.one/js","enable":true,"site_pv":false,"site_uv":false,"post_pv":true},"single_page":true,"preloader":true,"open_graph":true,"google_analytics":{"enable":false,"id":null}},"home_banner":{"enable":true,"style":"fixed","image":{"light":"/images/wallhaven-wqery6-light.webp","dark":"/images/wallhaven-wqery6-dark.webp"},"title":"AuroBreeze","subtitle":{"text":["等清风拂面,笑看人间"],"hitokoto":{"enable":false,"api":"https://v1.hitokoto.cn"},"typing_speed":80,"backing_speed":80,"starting_delay":1000,"backing_delay":1500,"loop":true,"smart_backspace":true},"text_color":{"light":"#fff","dark":"#d1d1b6"},"text_style":{"title_size":"2.8rem","subtitle_size":"1.5rem","line_height":1.2},"custom_font":{"enable":false,"family":null,"url":null},"social_links":{"enable":true,"style":"default","links":{"github":"https://github.com/AuroBreeze","instagram":null,"zhihu":null,"twitter":null,"email":"1732373074@aliyun.com"},"qrs":{"weixin":null}}},"plugins":{"feed":{"enable":false},"aplayer":{"enable":false,"type":"fixed","audios":[{"name":null,"artist":null,"url":null,"cover":null,"lrc":null}]},"mermaid":{"enable":false,"version":"9.3.0"}},"version":"2.6.4","navbar":{"auto_hide":false,"color":{"left":"#f78736","right":"#367df7","transparency":35},"width":{"home":"1200px","pages":"1000px"},"links":{"Home":{"path":"/","icon":"fa-regular fa-house"},"Archives":{"path":"/archives","icon":"fa-regular fa-archive"},"Tags":{"icon":"fa-solid fa-tags","path":"/tags/"},"Categories":{"icon":"fa-solid fa-folder","path":"/categories/"},"Friends":{"icon":"fa-solid fa-link","path":"/links/"},"About":{"icon":"fa-regular fa-user","submenus":{"Me":"/about","Github":"https://github.com/AuroBreeze","Blog":"https://aurobreeze.top"}}},"search":{"enable":true,"preload":true}},"page_templates":{"friends_column":2,"tags_style":"blur"},"home":{"sidebar":{"enable":true,"position":"left","first_item":"menu","announcement":"西门啸雪的小窝","show_on_mobile":true,"links":{"Archives":{"path":"/archives","icon":"fa-regular fa-archive"},"Tags":{"path":"/tags","icon":"fa-regular fa-tags"},"Categories":{"path":"/categories","icon":"fa-regular fa-folder"}}},"article_date_format":"auto","categories":{"enable":true,"limit":3},"tags":{"enable":true,"limit":3}},"footerStart":"2024/8/10 12:00:00"};
    window.lang_ago = {"second":"%s 秒前","minute":"%s 分钟前","hour":"%s 小时前","day":"%s 天前","week":"%s 周前","month":"%s 个月前","year":"%s 年前"};
    window.data = {"masonry":false};
  </script>
    
    <!--- Fontawesome Part-->
    
<link rel="stylesheet" href="/fontawesome/fontawesome.min.css">

    
<link rel="stylesheet" href="/fontawesome/brands.min.css">

    
<link rel="stylesheet" href="/fontawesome/solid.min.css">

    
<link rel="stylesheet" href="/fontawesome/regular.min.css">

    
    
    
    
    <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
    <script>LA.init({id:"3JKUPn8RBXzO8Bzv",ck:"3JKUPn8RBXzO8Bzv"})</script>
<meta name="generator" content="Hexo 7.3.0"></head>


<body>
<div class="progress-bar-container">
    

    
        <span class="pjax-progress-bar"></span>
<!--        <span class="swup-progress-icon">-->
<!--            <i class="fa-solid fa-circle-notch fa-spin"></i>-->
<!--        </span>-->
    
</div>



    <style>
    :root {
        --preloader-background-color: #fff;
        --preloader-text-color: #000;
    }

    @media (prefers-color-scheme: dark) {
        :root {
            --preloader-background-color: #202124;
            --preloader-text-color: #fff;
        }
    }

    @media (prefers-color-scheme: light) {
        :root {
            --preloader-background-color: #fff;
            --preloader-text-color: #000;
        }
    }

    @media (max-width: 600px) {
        .ml13 {
            font-size: 2.6rem !important; /* Adjust this value as needed */
        }
    }

    .preloader {
        display: flex;
        flex-direction: column;
        gap: 1rem; /* Tailwind 'gap-4' is 1rem */
        align-items: center;
        justify-content: center;
        position: fixed;
        padding: 12px;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100vw;
        height: 100vh; /* 'h-screen' is 100% of the viewport height */
        background-color: var(--preloader-background-color);
        z-index: 1100; /* 'z-[1100]' sets the z-index */
        transition: opacity 0.2s ease-in-out;
    }

    .ml13 {
        font-size: 3.2rem;
        /* text-transform: uppercase; */
        color: var(--preloader-text-color);
        letter-spacing: -1px;
        font-weight: 500;
        font-family: 'Chillax-Variable', sans-serif;
        text-align: center;
    }

    .ml13 .word {
        display: inline-flex;
        flex-wrap: wrap;
        white-space: nowrap;
    }

    .ml13 .letter {
        display: inline-block;
        line-height: 1em;
    }
</style>

<div class="preloader">
    <h2 class="ml13">
        AuroBreeze
    </h2>
    <script>
        var textWrapper = document.querySelector('.ml13');
        // Split text into words
        var words = textWrapper.textContent.trim().split(' ');

        // Clear the existing content
        textWrapper.innerHTML = '';

        // Wrap each word and its letters in spans
        words.forEach(function(word) {
            var wordSpan = document.createElement('span');
            wordSpan.classList.add('word');
            wordSpan.innerHTML = word.replace(/\S/g, "<span class='letter'>$&</span>");
            textWrapper.appendChild(wordSpan);
            textWrapper.appendChild(document.createTextNode(' ')); // Add space between words
        });

        var animation = anime.timeline({loop: true})
            .add({
                targets: '.ml13 .letter',
                translateY: [40,0],
                translateZ: 0,
                opacity: [0,1],
                filter: ['blur(5px)', 'blur(0px)'], // Starting from blurred to unblurred
                easing: "easeOutExpo",
                duration: 1400,
                delay: (el, i) => 300 + 30 * i,
            }).add({
                targets: '.ml13 .letter',
                translateY: [0,-40],
                opacity: [1,0],
                filter: ['blur(0px)', 'blur(5px)'], // Ending from unblurred to blurred
                easing: "easeInExpo",
                duration: 1200,
                delay: (el, i) => 100 + 30 * i,
                complete: function() {
                    hidePreloader(); // Call hidePreloader after the animation completes
                }
            });

        let themeStatus = JSON.parse(localStorage.getItem('REDEFINE-THEME-STATUS'))?.isDark;

        // If the theme status is not found in local storage, check the preferred color scheme
        if (themeStatus === undefined || themeStatus === null) {
            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
                themeStatus = 'dark';
            } else {
                themeStatus = 'light';
            }
        }

        // Now you can use the themeStatus variable in your code
        if (themeStatus) {
            document.documentElement.style.setProperty('--preloader-background-color', '#202124');
            document.documentElement.style.setProperty('--preloader-text-color', '#fff');
        } else {
            document.documentElement.style.setProperty('--preloader-background-color', '#fff');
            document.documentElement.style.setProperty('--preloader-text-color', '#000');
        }

        window.addEventListener('load', function () {
            setTimeout(hidePreloader, 5000); // Call hidePreloader after 5000 milliseconds if not already called by animation
        });

        function hidePreloader() {
            var preloader = document.querySelector('.preloader');
            preloader.style.opacity = '0';
            setTimeout(function () {
                preloader.style.display = 'none';
            }, 200);
        }
    </script>
</div>

<main class="page-container" id="swup">

    

    <div class="main-content-container">


        <div class="main-content-header">
            <header class="navbar-container px-6 md:px-12">

    <div class="navbar-content ">
        <div class="left">
            
            <a class="logo-title" href="/">
                
                AuroBreeze
                
            </a>
        </div>

        <div class="right">
            <!-- PC -->
            <div class="desktop">
                <ul class="navbar-list">
                    
                        
                            

                            <li class="navbar-item">
                                <!-- Menu -->
                                <a class=""
                                   href="/"
                                        >
                                    <i class="fa-regular fa-house fa-fw"></i>
                                    首页
                                    
                                </a>

                                <!-- Submenu -->
                                
                            </li>
                    
                        
                            

                            <li class="navbar-item">
                                <!-- Menu -->
                                <a class=""
                                   href="/archives"
                                        >
                                    <i class="fa-regular fa-archive fa-fw"></i>
                                    归档
                                    
                                </a>

                                <!-- Submenu -->
                                
                            </li>
                    
                        
                            

                            <li class="navbar-item">
                                <!-- Menu -->
                                <a class=""
                                   href="/tags/"
                                        >
                                    <i class="fa-solid fa-tags fa-fw"></i>
                                    标签
                                    
                                </a>

                                <!-- Submenu -->
                                
                            </li>
                    
                        
                            

                            <li class="navbar-item">
                                <!-- Menu -->
                                <a class=""
                                   href="/categories/"
                                        >
                                    <i class="fa-solid fa-folder fa-fw"></i>
                                    分类
                                    
                                </a>

                                <!-- Submenu -->
                                
                            </li>
                    
                        
                            

                            <li class="navbar-item">
                                <!-- Menu -->
                                <a class=""
                                   href="/links/"
                                        >
                                    <i class="fa-solid fa-link fa-fw"></i>
                                    友情链接
                                    
                                </a>

                                <!-- Submenu -->
                                
                            </li>
                    
                        
                            

                            <li class="navbar-item">
                                <!-- Menu -->
                                <a class="has-dropdown"
                                   href="#"
                                        onClick=&#34;return false;&#34;>
                                    <i class="fa-regular fa-user fa-fw"></i>
                                    关于
                                    <i class="fa-solid fa-chevron-down fa-fw"></i>
                                </a>

                                <!-- Submenu -->
                                
                                    <ul class="sub-menu">
                                        
                                            <li>
                                                <a href="/about">
                                                    ME
                                                </a>
                                            </li>
                                        
                                            <li>
                                                <a target="_blank" rel="noopener" href="https://github.com/AuroBreeze">
                                                    GITHUB
                                                </a>
                                            </li>
                                        
                                            <li>
                                                <a href="https://aurobreeze.top">
                                                    BLOG
                                                </a>
                                            </li>
                                        
                                    </ul>
                                
                            </li>
                    
                    
                        <li class="navbar-item search search-popup-trigger">
                            <i class="fa-solid fa-magnifying-glass"></i>
                        </li>
                    
                </ul>
            </div>
            <!-- Mobile -->
            <div class="mobile">
                
                    <div class="icon-item search search-popup-trigger"><i class="fa-solid fa-magnifying-glass"></i>
                    </div>
                
                <div class="icon-item navbar-bar">
                    <div class="navbar-bar-middle"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Mobile sheet -->
    <div class="navbar-drawer h-screen w-full absolute top-0 left-0 bg-background-color flex flex-col justify-between">
        <ul class="drawer-navbar-list flex flex-col px-4 justify-center items-start">
            
                
                    

                    <li class="drawer-navbar-item text-base my-1.5 flex flex-col w-full">
                        
                        <a class="py-1.5 px-2 flex flex-row items-center justify-between gap-1 hover:!text-primary active:!text-primary text-2xl font-semibold group border-b border-border-color hover:border-primary w-full "
                           href="/"
                        >
                            <span>
                                首页
                            </span>
                            
                                <i class="fa-regular fa-house fa-sm fa-fw"></i>
                            
                        </a>
                        

                        
                    </li>
            
                
                    

                    <li class="drawer-navbar-item text-base my-1.5 flex flex-col w-full">
                        
                        <a class="py-1.5 px-2 flex flex-row items-center justify-between gap-1 hover:!text-primary active:!text-primary text-2xl font-semibold group border-b border-border-color hover:border-primary w-full "
                           href="/archives"
                        >
                            <span>
                                归档
                            </span>
                            
                                <i class="fa-regular fa-archive fa-sm fa-fw"></i>
                            
                        </a>
                        

                        
                    </li>
            
                
                    

                    <li class="drawer-navbar-item text-base my-1.5 flex flex-col w-full">
                        
                        <a class="py-1.5 px-2 flex flex-row items-center justify-between gap-1 hover:!text-primary active:!text-primary text-2xl font-semibold group border-b border-border-color hover:border-primary w-full "
                           href="/tags/"
                        >
                            <span>
                                标签
                            </span>
                            
                                <i class="fa-solid fa-tags fa-sm fa-fw"></i>
                            
                        </a>
                        

                        
                    </li>
            
                
                    

                    <li class="drawer-navbar-item text-base my-1.5 flex flex-col w-full">
                        
                        <a class="py-1.5 px-2 flex flex-row items-center justify-between gap-1 hover:!text-primary active:!text-primary text-2xl font-semibold group border-b border-border-color hover:border-primary w-full "
                           href="/categories/"
                        >
                            <span>
                                分类
                            </span>
                            
                                <i class="fa-solid fa-folder fa-sm fa-fw"></i>
                            
                        </a>
                        

                        
                    </li>
            
                
                    

                    <li class="drawer-navbar-item text-base my-1.5 flex flex-col w-full">
                        
                        <a class="py-1.5 px-2 flex flex-row items-center justify-between gap-1 hover:!text-primary active:!text-primary text-2xl font-semibold group border-b border-border-color hover:border-primary w-full "
                           href="/links/"
                        >
                            <span>
                                友情链接
                            </span>
                            
                                <i class="fa-solid fa-link fa-sm fa-fw"></i>
                            
                        </a>
                        

                        
                    </li>
            
                
                    

                    <li class="drawer-navbar-item-sub text-base my-1.5 flex flex-col w-full">
                        
                        <div class="py-1.5 px-2 flex flex-row items-center justify-between gap-1 hover:!text-primary active:!text-primary cursor-pointer text-2xl font-semibold group border-b border-border-color hover:border-primary w-full "
                             navbar-data-toggle="submenu-About"
                        >
                            <span>
                                关于
                            </span>
                            
                                <i class="fa-solid fa-chevron-right fa-sm fa-fw transition-all"></i>
                            
                        </div>
                        

                        
                            <div class="flex-col items-start px-2 py-2 hidden" data-target="submenu-About">
                                
                                    <div class="drawer-navbar-item text-base flex flex-col justify-center items-start hover:underline active:underline hover:underline-offset-1 rounded-3xl">
                                        <a class=" text-third-text-color text-xl"
                                           href="/about">ME</a>
                                    </div>
                                
                                    <div class="drawer-navbar-item text-base flex flex-col justify-center items-start hover:underline active:underline hover:underline-offset-1 rounded-3xl">
                                        <a class=" text-third-text-color text-xl"
                                           target="_blank" rel="noopener" href="https://github.com/AuroBreeze">GITHUB</a>
                                    </div>
                                
                                    <div class="drawer-navbar-item text-base flex flex-col justify-center items-start hover:underline active:underline hover:underline-offset-1 rounded-3xl">
                                        <a class=" text-third-text-color text-xl"
                                           href="https://aurobreeze.top">BLOG</a>
                                    </div>
                                
                            </div>
                        
                    </li>
            

            
            
                
                    
                    
                    
            
        </ul>

        <div class="statistics flex justify-around my-2.5">
    <a class="item tag-count-item flex flex-col justify-center items-center w-20" href="/tags">
        <div class="number text-2xl sm:text-xl text-second-text-color font-semibold">8</div>
        <div class="label text-third-text-color text-sm">标签</div>
    </a>
    <a class="item tag-count-item flex flex-col justify-center items-center w-20" href="/categories">
        <div class="number text-2xl sm:text-xl text-second-text-color font-semibold">5</div>
        <div class="label text-third-text-color text-sm">分类</div>
    </a>
    <a class="item tag-count-item flex flex-col justify-center items-center w-20" href="/archives">
        <div class="number text-2xl sm:text-xl text-second-text-color font-semibold">10</div>
        <div class="label text-third-text-color text-sm">文章</div>
    </a>
</div>
    </div>

    <div class="window-mask"></div>

</header>


        </div>

        <div class="main-content-body">

            

            <div class="main-content">

                
                    <div class="post-page-container flex relative justify-between box-border w-full h-full">
    <div class="article-content-container">

        <div class="article-title relative w-full">
            
                <div class="w-full flex items-center pt-6 justify-start">
                    <h1 class="article-title-regular text-second-text-color tracking-tight text-4xl md:text-6xl font-semibold px-2 sm:px-6 md:px-8 py-3">图解HTTP笔记</h1>
                </div>
            
            </div>

        
            <div class="article-header flex flex-row gap-2 items-center px-2 sm:px-6 md:px-8">
                <div class="avatar w-[46px] h-[46px] flex-shrink-0 rounded-medium border border-border-color p-[1px]">
                    <img src="http://imgos.cn/2024/07/27/66a49edd1a14f.jpg">
                </div>
                <div class="info flex flex-col justify-between">
                    <div class="author flex items-center">
                        <span class="name text-default-text-color text-lg font-semibold">西门啸雪</span>
                        
                            <span class="author-label ml-1.5 text-xs px-2 py-0.5 rounded-small text-third-text-color border border-shadow-color-1">Lv2</span>
                        
                    </div>
                    <div class="meta-info">
                        <div class="article-meta-info">
    <span class="article-date article-meta-item">
        <i class="fa-regular fa-pen-fancy"></i>&nbsp;
        <span class="desktop">2024-10-13 10:30</span>
        <span class="mobile">2024-10-13 10:30</span>
        <span class="hover-info">创建</span>
    </span>
    
        <span class="article-date article-meta-item">
            <i class="fa-regular fa-wrench"></i>&nbsp;
            <span class="desktop">2024-10-13 10:41:40</span>
            <span class="mobile">2024-10-13 10:41:40</span>
            <span class="hover-info">更新</span>
        </span>
    

    
        <span class="article-categories article-meta-item">
            <i class="fa-regular fa-folders"></i>&nbsp;
            <ul>
                
                
                    
                        
                        <li>
                            <a href="/categories/HTTP/">HTTP</a>&nbsp;
                        </li>
                    
                    
                
            </ul>
        </span>
    
    
        <span class="article-tags article-meta-item">
            <i class="fa-regular fa-tags"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/tags/HTTP/">HTTP</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    

    
    
        <span class="article-wordcount article-meta-item">
            <i class="fa-regular fa-typewriter"></i>&nbsp;<span>2k 字</span>
        </span>
    
    
        <span class="article-min2read article-meta-item">
            <i class="fa-regular fa-clock"></i>&nbsp;<span>7 分钟</span>
        </span>
    
    
        <span class="article-pv article-meta-item">
            <i class="fa-regular fa-eye"></i>&nbsp;<span id="busuanzi_value_page_pv"></span>
        </span>
    
</div>

                    </div>
                </div>
            </div>
        

        


        <div class="article-content markdown-body px-2 sm:px-6 md:px-8 pb-8">
            <h1 id="简单的HTTP协议"><a href="#简单的HTTP协议" class="headerlink" title="简单的HTTP协议"></a>简单的HTTP协议</h1><h2 id="HTTP请求报文"><a href="#HTTP请求报文" class="headerlink" title="HTTP请求报文"></a>HTTP请求报文</h2><div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">GET /index.html HTTP/1.1</span><br><span class="line">Host: www.example.com</span><br><span class="line">Connection: keep-alive</span><br><span class="line">Upgrade-Insecure-Requests: 1</span><br><span class="line">User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36</span><br><span class="line"></span><br><span class="line">name=value&amp;name2=value2</span><br></pre></td></tr></table></figure></div>

<ol>
<li>请求行：</li>
</ol>
<ul>
<li>GET：请求方法，表示请求获取资源。</li>
<li>&#x2F;index.html：请求资源的路径。</li>
<li>HTTP&#x2F;1.1：HTTP版本。</li>
</ul>
<ol start="2">
<li>请求首部：</li>
</ol>
<ul>
<li>Host：指定请求的服务器域名。</li>
<li>Connection：指定与服务器的连接类型，可以是keep-alive或close。</li>
<li>Upgrade-Insecure-Requests：指定是否使用HTTP升级。</li>
<li>User-Agent：指定客户端浏览器类型。</li>
</ul>
<ol start="3">
<li>请求数据：</li>
</ol>
<ul>
<li>name&#x3D;value&amp;name2&#x3D;value2：请求数据，一般是查询字符串。<strong>内容实体</strong>。</li>
</ul>
<h2 id="HTTP响应报文"><a href="#HTTP响应报文" class="headerlink" title="HTTP响应报文"></a>HTTP响应报文</h2><div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">HTTP/1.1 200 OK</span><br><span class="line">Date: Mon, 13 Jan 2024 04:30:00 GMT</span><br><span class="line">Server: Apache/2.4.18 (Ubuntu)</span><br><span class="line">Last-Modified: Mon, 09 Aug 2019 02:53:20 GMT</span><br><span class="line">ETag: &quot;3147526947&quot;</span><br><span class="line">Accept-Ranges: bytes</span><br><span class="line">Content-Length: 1546</span><br><span class="line">Content-Type: text/html</span><br><span class="line"></span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure></div>

<ol>
<li><p>状态行：<br>200 OK：表示请求成功，状态码为200。</p>
</li>
<li><p>响应首部：</p>
</li>
</ol>
<ul>
<li>Date：响应产生的时间。</li>
<li>Server：服务器软件名称。</li>
<li>Last-Modified：资源的最后修改时间。</li>
<li>ETag：资源的标识符。</li>
<li>Accept-Ranges：服务器是否支持范围请求。</li>
<li>Content-Length：响应内容的长度。</li>
<li>Content-Type：响应内容的类型。</li>
</ul>
<ol start="3">
<li>响应数据：<br>响应内容，一般是<code>HTML</code>、<code>CSS</code>、<code>JavaScript</code>、<code>图片</code>等内容。</li>
</ol>
<h2 id="HTTP方法"><a href="#HTTP方法" class="headerlink" title="HTTP方法"></a>HTTP方法</h2><ol>
<li>GET：请求获取资源。</li>
<li>POST：向服务器提交数据，请求服务器处理数据。</li>
<li>PUT：上传文件到服务器。 一般因为安全问题不支持使用。</li>
<li>DELETE：删除服务器上的文件。 一般因为安全问题不支持使用。</li>
<li>HEAD：类似于GET，但只返回HTTP头部。</li>
<li>OPTIONS：询问服务器对特定资源支持的方法。</li>
<li>TRACE：回显服务器收到的请求，主要用于测试或诊断。 一般不支持使用。</li>
<li>CONNECT：与代理服务器通信时建立隧道。</li>
</ol>
<h2 id="HTTP小记"><a href="#HTTP小记" class="headerlink" title="HTTP小记"></a>HTTP小记</h2><ol>
<li><p>HTTP是不保存状态的协议，协议对于发送过的请求或相应都不做持久化处理。</p>
<ul>
<li>为了实现保存状态，引入了Cookie和Session技术，服务器发送Set-Cookie响应首部，客户端接收后保存在本地，下次请求时在请求头部添加Cookie。</li>
</ul>
</li>
<li><p>HTTP1.1使用持续连接（Persistent Connections）来保持连接，减轻服务器负担，减少延迟，并使用管线化(Pipelining)技术，并行发送多个请求。</p>
</li>
</ol>
<h1 id="HTTP报文信息"><a href="#HTTP报文信息" class="headerlink" title="HTTP报文信息"></a>HTTP报文信息</h1><h2 id="HTTP发送多数据集合"><a href="#HTTP发送多数据集合" class="headerlink" title="HTTP发送多数据集合"></a>HTTP发送多数据集合</h2><ul>
<li>多部份对象集合包含的对象如下：<ul>
<li>mulitpart&#x2F;form-data：在web表单文件上传时使用。</li>
<li>mulitpart&#x2F;byteranges：用于断点续传。</li>
</ul>
</li>
</ul>
<div class="highlight-container" data-rel="Html"><figure class="iseeu highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">content-type: multipart/form-data; boundary=Auro</span><br><span class="line"></span><br><span class="line">--Auro</span><br><span class="line">Content-Disposition: form-data; name=&quot;text&quot;</span><br><span class="line"></span><br><span class="line">hello world</span><br><span class="line">--Auro</span><br><span class="line">Content-Disposition: form-data; name=&quot;file&quot;; filename=&quot;test.txt&quot;</span><br><span class="line">Content-Type: text/plain</span><br><span class="line">hello world</span><br><span class="line">--Auro--</span><br></pre></td></tr></table></figure></div>

<div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">HTTP/1.1 206 Partial Content</span><br><span class="line">Content-Type: multipart/byteranges; boundary=Auro</span><br><span class="line">Content-Range: bytes 0-1023/2048</span><br><span class="line"></span><br><span class="line">--Auro</span><br><span class="line">Content-Type: text/plain</span><br><span class="line">Content-Range: bytes 0-1023/2048</span><br><span class="line"></span><br><span class="line">(指定范围的数据)</span><br><span class="line"></span><br><span class="line">--Auro</span><br><span class="line">Content-Type: text/plain</span><br><span class="line">Content-Range: bytes 1024-2047/2048</span><br><span class="line"></span><br><span class="line">(指定范围的数据)</span><br><span class="line"></span><br><span class="line">--Auro--</span><br></pre></td></tr></table></figure></div>

<blockquote>
<p>注意：</p>
<ul>
<li>使用<code>boundary</code>参数指定分隔符,并在起始行使用<code>--</code>作为分隔符,在最后使用<code>--</code>来表示结束。</li>
<li><code>Content-Range</code>首部用于指定当前分块的范围。</li>
</ul>
</blockquote>
<h1 id="内容协商"><a href="#内容协商" class="headerlink" title="内容协商"></a>内容协商</h1><blockquote>
<p>内容协商（Content Negotiation）是指客户端和服务器之间互相通告自己偏好的内容，然后由服务器根据双方的偏好提供合适的内容。</p>
<p>通常会用到的请求报文的首部字段如下：</p>
<ul>
<li>Accept：客户端可接受的响应内容类型。</li>
<li>Accept-Charset：客户端可接受的字符集。</li>
<li>Accept-Encoding：客户端可接受的编码方式。</li>
<li>Accept-Language：客户端可接受的语言。</li>
<li>Content-Language：响应内容的语言。</li>
</ul>
</blockquote>
<h2 id="三种内容协商方式及其特点"><a href="#三种内容协商方式及其特点" class="headerlink" title="三种内容协商方式及其特点"></a>三种内容协商方式及其特点</h2><ul>
<li>服务器驱动协商（Server-driven Negotiation）：服务器根据客户端的请求信息，提供合适的内容。</li>
<li>客户端驱动协商（Client-driven Negotiation）：客户端根据服务器的响应信息，选择合适的资源。</li>
<li>透明协商（Transparent Negotiation）：客户端和服务器之间不作任何协商，由客户端自己决定如何处理响应。</li>
</ul>
<h1 id="HTTP状态码"><a href="#HTTP状态码" class="headerlink" title="HTTP状态码"></a>HTTP状态码</h1><ol>
<li>1xx：指示信息–表示请求已接收，继续处理。</li>
<li>2xx：成功–表示请求已被成功接收、理解、并接受。</li>
<li>3xx：重定向–要完成请求必须进行更进一步的操作。</li>
<li>4xx：客户端错误–请求有语法错误或请求无法实现。</li>
<li>5xx：服务器错误–服务器未能实现合法的请求。</li>
</ol>
<blockquote>
<p>200 OK：请求成功。</p>
<p>204 No Content：请求成功，但响应报文不含实体的主体部分。</p>
<p>206 Partial Content：客户端进行了范围请求，响应报文包含由Content-Range指定范围的实体内容。</p>
<p>301 Moved Permanently：永久重定向，请求的资源已被分配新的URL。</p>
<p>302 Found：临时重定向，请求的资源已被分配新的URL。</p>
<p>304 Not Modified：如果客户端发送了一个带条件的GET请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个状态码。</p>
<p>400 Bad Request：请求报文中存在语法错误。</p>
<p>401 Unauthorized：请求未经授权。</p>
<p>403 Forbidden：服务器拒绝请求。</p>
<p>404 Not Found：服务器无法找到请求的资源。</p>
<p>500 Internal Server Error：服务器遇到错误，无法完成请求。</p>
<p>503 Service Unavailable：服务器当前不能处理请求，一段时间后可能恢复正常。</p>
</blockquote>
<h1 id="HTTP首部字段"><a href="#HTTP首部字段" class="headerlink" title="HTTP首部字段"></a>HTTP首部字段</h1><h2 id="通用首部字段"><a href="#通用首部字段" class="headerlink" title="通用首部字段"></a>通用首部字段</h2><ol>
<li>Cache-Control：指定请求或响应的缓存机制。</li>
<li>Connection：连接的管理。</li>
<li>Date：创建报文的日期时间。</li>
<li>Pragma：实现特定的功能，比如no-cache。</li>
<li>Trailer：指出尾部将会发送的首部。</li>
<li>Transfer-Encoding：指定报文主体的传输编码方式。</li>
<li>Upgrade：升级协议。</li>
<li>Warning：关于消息的警告信息。</li>
</ol>
<h2 id="请求首部字段"><a href="#请求首部字段" class="headerlink" title="请求首部字段"></a>请求首部字段</h2><ol>
<li>Accept：可接受的响应内容类型。</li>
<li>Accept-Charset：可接受的字符集。</li>
<li>Accept-Encoding：可接受的编码方式。</li>
<li>Accept-Language：可接受的语言。</li>
<li>Authorization：授权信息。</li>
<li>Expect：期望服务器的特定行为。</li>
<li>From：用户的电子邮箱地址。</li>
<li>Host：请求资源所在的服务器。</li>
<li>If-Match：只有请求内容与实体相匹配才有效。</li>
<li>If-Modified-Since：如果请求的资源在指定日期之后有修改，则请求成功。</li>
<li>If-None-Match：只有请求内容与实体不匹配才有效。</li>
<li>If-Range：如果实体未改变，发送客户端当前实体的部分内容。</li>
<li>If-Unmodified-Since：如果请求的资源在指定日期之后没有修改，则请求成功。</li>
<li>Max-Forwards：最大传输途径。</li>
<li>Range：请求实体的部分内容。</li>
<li>Referer：先前网页的地址，当前请求网页紧随其后。</li>
<li>TE：可接受的传输编码方式。</li>
<li>User-Agent: 客户端程序信息。</li>
</ol>
<h2 id="响应首部字段"><a href="#响应首部字段" class="headerlink" title="响应首部字段"></a>响应首部字段</h2><ol>
<li>Accept-Ranges：服务器是否接受范围请求。</li>
<li>Age：资源的有效时间。</li>
<li>ETag：资源的标识符。</li>
<li>Location：重定向的URI。</li>
<li>Retry-After：如果服务器在指定时间内没有收到请求，则可以再次发送请求。</li>
<li>Server：服务器软件信息。</li>
<li>WWW-Authenticate：服务器对客户端的认证信息。</li>
<li>Vary ：告诉缓存服务器在什么条件下才能使用响应的缓存。</li>
<li>Proxy-Authenticate: 代理服务器对客户端的认证信息。</li>
</ol>
<h2 id="实体首部字段"><a href="#实体首部字段" class="headerlink" title="实体首部字段"></a>实体首部字段</h2><ol>
<li>Allow：资源可支持的HTTP方法。</li>
<li>Content-Encoding：实体主体适用的编码方式。</li>
<li>Content-Language：实体主体的语言。</li>
<li>Content-Length：实体主体的大小。</li>
<li>Content-Location：替代的资源所在位置。</li>
<li>Content-MD5：实体主体的MD5摘要。</li>
<li>Content-Range：实体主体的位置范围。</li>
<li>Content-Type：实体主体的媒体类型。</li>
<li>Expires：实体主体过期的日期时间。</li>
<li>Last-Modified：资源的最后修改日期时间。</li>
<li>extension-header：可以添加任何扩展的首部字段。</li>
</ol>

        </div>

        
            <div class="post-copyright-info w-full my-8 px-2 sm:px-6 md:px-8">
                <div class="article-copyright-info-container">
    <ul>
        <li><strong>标题:</strong> 图解HTTP笔记</li>
        <li><strong>作者:</strong> 西门啸雪</li>
        <li><strong>创建于
                :</strong> 2024-10-13 10:30:00</li>
        
            <li>
                <strong>更新于
                    :</strong> 2024-10-13 10:41:40
            </li>
        
        <li>
            <strong>链接:</strong> http://aurobreeze.top/2024/10/13/图解HTTP笔记/
        </li>
        <li>
            <strong>
                版权声明:
            </strong>
            

            
                本文章采用 <a class="license" target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0">CC BY-NC-SA 4.0</a> 进行许可。
            
        </li>
    </ul>
</div>

            </div>
        

        
            <ul class="post-tags-box text-lg mt-1.5 flex-wrap justify-center flex md:hidden">
                
                    <li class="tag-item mx-0.5">
                        <a href="/tags/HTTP/">#HTTP</a>&nbsp;
                    </li>
                
            </ul>
        

        

        
            <div class="article-nav my-8 flex justify-between items-center px-2 sm:px-6 md:px-8">
                
                    <div class="article-prev border-border-color shadow-redefine-flat shadow-shadow-color-2 rounded-medium px-4 py-2 hover:shadow-redefine-flat-hover hover:shadow-shadow-color-2">
                        <a class="prev"
                        rel="prev"
                        href="/2024/11/08/%E7%9F%A5%E6%96%B0%E5%81%9A%E9%A2%98%E8%BD%AF%E4%BB%B6%E7%9A%84%E4%BD%BF%E7%94%A8/"
                        >
                            <span class="left arrow-icon flex justify-center items-center">
                                <i class="fa-solid fa-chevron-left"></i>
                            </span>
                            <span class="title flex justify-center items-center">
                                <span class="post-nav-title-item">知新做题软件的使用</span>
                                <span class="post-nav-item">上一篇</span>
                            </span>
                        </a>
                    </div>
                
                
                    <div class="article-next border-border-color shadow-redefine-flat shadow-shadow-color-2 rounded-medium px-4 py-2 hover:shadow-redefine-flat-hover hover:shadow-shadow-color-2">
                        <a class="next"
                        rel="next"
                        href="/2024/09/09/CTFwebd%E7%9A%84%E7%AE%80%E5%8D%95%E5%85%A5%E9%97%A8/"
                        >
                            <span class="title flex justify-center items-center">
                                <span class="post-nav-title-item">CTFweb的简单入门</span>
                                <span class="post-nav-item">下一篇</span>
                            </span>
                            <span class="right arrow-icon flex justify-center items-center">
                                <i class="fa-solid fa-chevron-right"></i>
                            </span>
                        </a>
                    </div>
                
            </div>
        


        
            <div class="comment-container px-2 sm:px-6 md:px-8 pb-8">
                <div class="comments-container mt-10 w-full ">
    <div id="comment-anchor" class="w-full h-2.5"></div>
    <div class="comment-area-title w-full my-1.5 md:my-2.5 text-xl md:text-3xl font-bold">
        评论
    </div>
    

        
            
    <div id="giscus-container"></div>
    <script data-swup-reload-script defer>
        async function loadGiscus() {
            const giscusConfig = {
                'src': 'https://giscus.app/client.js',
                'data-repo': 'ximenxiaoxue/new_blog_comment',
                'data-repo-id': 'R_kgDOMiDymw# Github repository id',
                'data-category': 'Announcements',
                'data-category-id': 'DIC_kwDOMiDym84Chisb',
                'data-mapping': 'title',
                'data-strict': '0',
                'data-reactions-enabled': '1',
                'data-emit-metadata': '1',
                'data-theme': 'preferred_color_scheme',
                'data-lang': 'zh-CN',
                'data-input-position': 'bottom',
                'data-loading': 'not-lazy',
                'crossorigin': 'anonymous',
                'async': true
            }
            const giscusScript = document.createElement('script');
            for (const key in giscusConfig) {
                giscusScript.setAttribute(key, giscusConfig[key]);
            }
            document.getElementById('giscus-container').appendChild(giscusScript);
        }
        if ('true') {
            let loadGiscusTimeout = setTimeout(() => {
                loadGiscus();
                clearTimeout(loadGiscusTimeout);
            }, 1000);
        } else {
            document.addEventListener('DOMContentLoaded', loadGiscus);
        }
    </script>


        
        
    
</div>

            </div>
        
    </div>

    
        <div class="toc-content-container">
            <div class="post-toc-wrap">
    <div class="post-toc">
        <div class="toc-title">此页目录</div>
        <div class="page-title">图解HTTP笔记</div>
        <ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E7%AE%80%E5%8D%95%E7%9A%84HTTP%E5%8D%8F%E8%AE%AE"><span class="nav-text">简单的HTTP协议</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#HTTP%E8%AF%B7%E6%B1%82%E6%8A%A5%E6%96%87"><span class="nav-text">HTTP请求报文</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#HTTP%E5%93%8D%E5%BA%94%E6%8A%A5%E6%96%87"><span class="nav-text">HTTP响应报文</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#HTTP%E6%96%B9%E6%B3%95"><span class="nav-text">HTTP方法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#HTTP%E5%B0%8F%E8%AE%B0"><span class="nav-text">HTTP小记</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#HTTP%E6%8A%A5%E6%96%87%E4%BF%A1%E6%81%AF"><span class="nav-text">HTTP报文信息</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#HTTP%E5%8F%91%E9%80%81%E5%A4%9A%E6%95%B0%E6%8D%AE%E9%9B%86%E5%90%88"><span class="nav-text">HTTP发送多数据集合</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%86%85%E5%AE%B9%E5%8D%8F%E5%95%86"><span class="nav-text">内容协商</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%89%E7%A7%8D%E5%86%85%E5%AE%B9%E5%8D%8F%E5%95%86%E6%96%B9%E5%BC%8F%E5%8F%8A%E5%85%B6%E7%89%B9%E7%82%B9"><span class="nav-text">三种内容协商方式及其特点</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#HTTP%E7%8A%B6%E6%80%81%E7%A0%81"><span class="nav-text">HTTP状态码</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#HTTP%E9%A6%96%E9%83%A8%E5%AD%97%E6%AE%B5"><span class="nav-text">HTTP首部字段</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%80%9A%E7%94%A8%E9%A6%96%E9%83%A8%E5%AD%97%E6%AE%B5"><span class="nav-text">通用首部字段</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%AF%B7%E6%B1%82%E9%A6%96%E9%83%A8%E5%AD%97%E6%AE%B5"><span class="nav-text">请求首部字段</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%93%8D%E5%BA%94%E9%A6%96%E9%83%A8%E5%AD%97%E6%AE%B5"><span class="nav-text">响应首部字段</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%9E%E4%BD%93%E9%A6%96%E9%83%A8%E5%AD%97%E6%AE%B5"><span class="nav-text">实体首部字段</span></a></li></ol></li></ol>

    </div>
</div>
        </div>
    
</div>



                

            </div>

            

        </div>

        <div class="main-content-footer">
            <footer class="footer mt-5 py-5 h-auto text-base text-third-text-color relative border-t-2 border-t-border-color">
    <div class="info-container py-3 text-center">
        
        <div class="text-center">
            &copy;
            
              <span>2024</span>
              -
            
            2024&nbsp;&nbsp;<i class="fa-solid fa-heart fa-beat" style="--fa-animation-duration: 0.5s; color: #f54545"></i>&nbsp;&nbsp;<a href="/">西门啸雪</a>
            
                
                <p class="post-count space-x-0.5">
                    <span>
                        共 10 篇文章
                    </span>
                    
                        <span>
                            共 27.2k 字
                        </span>
                    
                </p>
            
        </div>
        
            <script data-swup-reload-script src="https://cn.vercount.one/js"></script>
            <div class="relative text-center lg:absolute lg:right-[20px] lg:top-1/2 lg:-translate-y-1/2 lg:text-right">
                
                
            </div>
        
        <div class="relative text-center lg:absolute lg:left-[20px] lg:top-1/2 lg:-translate-y-1/2 lg:text-left">
            <span class="lg:block text-sm">由 <?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="relative top-[2px] inline-block align-baseline" version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1rem" height="1rem" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><path fill="#0E83CD" d="M256.4,25.8l-200,115.5L56,371.5l199.6,114.7l200-115.5l0.4-230.2L256.4,25.8z M349,354.6l-18.4,10.7l-18.6-11V275H200v79.6l-18.4,10.7l-18.6-11v-197l18.5-10.6l18.5,10.8V237h112v-79.6l18.5-10.6l18.5,10.8V354.6z"/></svg><a target="_blank" class="text-base" href="https://hexo.io">Hexo</a> 驱动</span>
            <span class="text-sm lg:block">主题&nbsp;<a class="text-base" target="_blank" href="https://github.com/EvanNotFound/hexo-theme-redefine">Redefine v2.6.4</a></span>
        </div>
        
            <div class="icp-info my-1"><a target="_blank" rel="nofollow" href="
                
                    https://beian.miit.gov.cn/
                
                ">鲁ICP备2024112337号-1</a></div>
        
        
            <div>
                博客已运行 <span class="odometer" id="runtime_days" ></span> 天 <span class="odometer" id="runtime_hours"></span> 小时 <span class="odometer" id="runtime_minutes"></span> 分钟 <span class="odometer" id="runtime_seconds"></span> 秒
            </div>
        
        
            <script data-swup-reload-script>
                try {
                    function odometer_init() {
                    const elements = document.querySelectorAll('.odometer');
                    elements.forEach(el => {
                        new Odometer({
                            el,
                            format: '( ddd).dd',
                            duration: 200
                        });
                    });
                    }
                    odometer_init();
                } catch (error) {}
            </script>
        
        
        
    </div>  
</footer>
        </div>
    </div>

    
        <div class="post-tools">
            <div class="post-tools-container">
    <ul class="article-tools-list">
        <!-- TOC aside toggle -->
        
            <li class="right-bottom-tools page-aside-toggle">
                <i class="fa-regular fa-outdent"></i>
            </li>
        

        <!-- go comment -->
        
            <li class="go-comment">
                <i class="fa-regular fa-comments"></i>
            </li>
        
    </ul>
</div>

        </div>
    

    <div class="right-side-tools-container">
        <div class="side-tools-container">
    <ul class="hidden-tools-list">
        <li class="right-bottom-tools tool-font-adjust-plus flex justify-center items-center">
            <i class="fa-regular fa-magnifying-glass-plus"></i>
        </li>

        <li class="right-bottom-tools tool-font-adjust-minus flex justify-center items-center">
            <i class="fa-regular fa-magnifying-glass-minus"></i>
        </li>

        <li class="right-bottom-tools tool-dark-light-toggle flex justify-center items-center">
            <i class="fa-regular fa-moon"></i>
        </li>

        <!-- rss -->
        

        

        <li class="right-bottom-tools tool-scroll-to-bottom flex justify-center items-center">
            <i class="fa-regular fa-arrow-down"></i>
        </li>
    </ul>

    <ul class="visible-tools-list">
        <li class="right-bottom-tools toggle-tools-list flex justify-center items-center">
            <i class="fa-regular fa-cog fa-spin"></i>
        </li>
        
            <li class="right-bottom-tools tool-scroll-to-top flex justify-center items-center">
                <i class="arrow-up fas fa-arrow-up"></i>
                <span class="percent"></span>
            </li>
        
        
    </ul>
</div>

    </div>

    <div class="image-viewer-container">
    <img src="">
</div>


    
        <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
          <span class="search-input-field-pre">
            <i class="fa-solid fa-keyboard"></i>
          </span>
            <div class="search-input-container">
                <input autocomplete="off"
                       autocorrect="off"
                       autocapitalize="off"
                       placeholder="搜索..."
                       spellcheck="false"
                       type="search"
                       class="search-input"
                >
            </div>
            <span class="popup-btn-close">
                <i class="fa-solid fa-times"></i>
            </span>
        </div>
        <div id="search-result">
            <div id="no-result">
                <i class="fa-solid fa-spinner fa-spin-pulse fa-5x fa-fw"></i>
            </div>
        </div>
    </div>
</div>

    

</main>


    
<script src="/js/libs/Swup.min.js"></script>

<script src="/js/libs/SwupSlideTheme.min.js"></script>

<script src="/js/libs/SwupScriptsPlugin.min.js"></script>

<script src="/js/libs/SwupProgressPlugin.min.js"></script>

<script src="/js/libs/SwupScrollPlugin.min.js"></script>

<script src="/js/libs/SwupPreloadPlugin.min.js"></script>

<script>
    const swup = new Swup({
        plugins: [
            new SwupScriptsPlugin({
                optin: true,
            }),
            new SwupProgressPlugin(),
            new SwupScrollPlugin({
                offset: 80,
            }),
            new SwupSlideTheme({
                mainElement: ".main-content-body",
            }),
            new SwupPreloadPlugin(),
        ],
        containers: ["#swup"],
    });
</script>







<script src="/js/tools/imageViewer.js" type="module"></script>

<script src="/js/utils.js" type="module"></script>

<script src="/js/main.js" type="module"></script>

<script src="/js/layouts/navbarShrink.js" type="module"></script>

<script src="/js/tools/scrollTopBottom.js" type="module"></script>

<script src="/js/tools/lightDarkSwitch.js" type="module"></script>

<script src="/js/layouts/categoryList.js" type="module"></script>



    
<script src="/js/tools/localSearch.js" type="module"></script>




    
<script src="/js/tools/codeBlock.js" type="module"></script>




    
<script src="/js/layouts/lazyload.js" type="module"></script>




    
<script src="/js/tools/runtime.js"></script>

    
<script src="/js/libs/odometer.min.js"></script>

    
<link rel="stylesheet" href="/assets/odometer-theme-minimal.css">




  
<script src="/js/libs/Typed.min.js"></script>

  
<script src="/js/plugins/typed.js" type="module"></script>









<div class="post-scripts" data-swup-reload-script>
    
        
<script src="/js/tools/tocToggle.js" type="module"></script>

<script src="/js/layouts/toc.js" type="module"></script>

<script src="/js/plugins/tabs.js" type="module"></script>

    
</div>


</body>
</html>
